<div class="panel-comprice df jcsb">
  <!-- 中间 和 买家发布 -->
  <div class="p-buy">
    <div class="hd">{{ "i18n.orderCol.head" | translate: lang }}</div>
    <div class="bd df">
      <div class="i">{{ "i18n.orderCol.no" | translate: lang }}</div>
      <div class="i">{{ "i18n.orderCol.amount" | translate: lang }}</div>
      <div class="i">{{ "i18n.orderCol.total" | translate: lang }}</div>
      <div class="i">{{ "i18n.orderCol.price" | translate: lang }}</div>
    </div>
    <div class="ft">
      <div
        matRipple
        (click)="setOnDepth(item, 'buy')"
        class="r df"
        *ngFor="let item of buyLists; let i = index"
      >
        <div class="i buy">{{ i + 1 }}</div>
        <div
          class="i"
          [title]="item.amount"
          v-formatAmount="{val:item.amount,point:minPoint}"
        >
          {{ item.amount }}
        </div>
        <div
          class="i total"
          [title]="item.total"
          v-formatAmount="{val:item.total,point:minPoint}"
        >
          {{ item.total }}
        </div>
        <div class="i buy-price" [title]="item.price">{{ item.price }}</div>
        <div class="bar" [ngStyle]="{ width: item.percent }"></div>
      </div>
    </div>
  </div>
  <div class="p-exchange"><ng-content></ng-content></div>
  <!-- 卖家发布 -->
  <div class="p-sell">
    <div class="hd"></div>
    <div class="bd df">
      <div class="i">{{ "i18n.orderCol.price" | translate: lang }}</div>
      <div class="i">{{ "i18n.orderCol.total" | translate: lang }}</div>
      <div class="i">{{ "i18n.orderCol.amount" | translate: lang }}</div>
      <div class="i">{{ "i18n.orderCol.no" | translate: lang }}</div>
    </div>
    <div class="ft" ref="sell">
      <div
        matRipple
        (click)="setOnDepth(item, 'sell')"
        class="r df"
        *ngFor="let item of sellLists; let i = index"
      >
        <div class="i sell-price" [title]="item.price">{{ item.price }}</div>
        <div
          class="i total"
          [title]="item.total"
          v-formatAmount="{val:item.total,point:minPoint}"
        >
          {{ item.total }}
        </div>
        <div
          class="i"
          [title]="item.amount"
          v-formatAmount="{val:item.amount,point:minPoint}"
        >
          {{ item.amount }}
        </div>

        <div class="i sell">{{ i + 1 }}</div>
        <div class="bar" [ngStyle]="{ width: item.percent }"></div>
      </div>
    </div>
  </div>

  <!--
    <div class="p-filter df">
      <button mat-button [matMenuTriggerFor]="menu" style="width:100%">
        {{ "i18n.orderCol.point" | translate: lang }} {{ onDepth.item.label }}
      </button>
      <mat-menu #menu="matMenu" xPosition="before" yPosition="above">
        <button mat-menu-item *ngFor="let item of pointLists">
          {{ item.label }}
        </button>
      </mat-menu>
    </div>
  -->
</div>
